<template>
  <view class="outBox bd t1">
    <view class="step-line flex flex-j-a bd">
      <view
        class="step"
        v-for="(v, index) in stepList"
        :key="index"
        :class="{ active: v.num == step }"
      >
        <text class="stepNum">{{ v.num }}</text
        >{{ v.name }}
      </view>
    </view>

    <!-- 表单start -->
    <view class="inp-group" style="">
      <!-- step1 -->
      <view class="inp-item" v-if="step == 1">
        <input
          class="inp uni-item-line"
          type="text"
          placeholder="请输入您的手机号"
          v-model="phoneNumber"
          maxlength="11"
        />
        <view style="margin-top: 100upx">
          <button type="default" class="sbtn" @tap="sendCode">
            {{ codeMsg }}
          </button>
        </view>
      </view>
      <u-modal
        v-model="showtip"
        :content="content"
        :show-cancel-button="true"
        @confirm="navgoscss()"
        @cancel="quitcancel"
      ></u-modal>
      <!-- step2 -->
      <view class="inp-item" v-if="step == 2">
        <view style="color: #555; font-size: 26upx"
          >验证短信已发送至
          <text style="color: #18c7e1">{{
            phoneNumber.substr(0, 3) + "****" + phoneNumber.substr(7)
          }}</text>
        </view>
        <input
          class="inp uni-item-line"
          type="number"
          placeholder="请输入短信中的验证码"
          v-model="vCode"
        />
        <view style="margin-top: 100upx">
          <button type="default" class="sbtn" @tap="subCode">提交验证码</button>
        </view>
      </view>
      <!-- step3 -->
      <view class="inp-item" v-if="step == 3">
        <u-input
          v-model="password"
          type="password"
          :password-icon="true"
          placeholder="请输入密码"
          maxlength="16"
        />
        <u-gap height="1" bg-color="#bbb"></u-gap>
        <div style="margin-bottom: 20px"></div>
        <u-input
          v-model="password2"
          type="password"
          :password-icon="true"
          placeholder="请输入确认密码"
          maxlength="16"
        />
        <u-gap height="1" bg-color="#bbb"></u-gap>
        <!-- <div style="margin-bottom: 20px;"></div> -->
        <!-- <u-input v-model="gcode" type="text" placeholder="推广码(可选)"/> -->
        <!-- <u-gap height="1" bg-color="#bbb"></u-gap> -->
        <!-- <input class="inp uni-item-line" type="text" placeholder="输入密码" 
					v-model="password" />
				<input class="inp uni-item-line" type="text" placeholder="确认密码"
					v-model="password2"/>
				<input class="inp uni-item-line" type="text" placeholder="推广码(可选)"
					v-model="gcode"/> -->
        <view style="margin-top: 100upx">
          <button type="default" class="sbtn" @tap="sub">确认提交</button>
        </view>
      </view>
    </view>
    <!-- 表单end -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      passwordIcon: true,
      showtip: false,
      content: "该手机号已被关联成为联系人，是否同步用户信息",
      stepList: [
        {
          name: "输入手机号",
          num: 1,
        },
        {
          name: "输入验证码",
          num: 2,
        },
        {
          name: "设置密码",
          num: 3,
        },
      ],
      step: 1,

      phoneNumber: "",
      password: "",
      password2: "",
      vCode: "", // 验证码
      gcode: "", // 推广码

      codeMsg: "发送验证码",
      count: 60,
      interval: null,
      idx: "", //存状态
    };
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    navgoscss() {
      //弹框确认的事件
      this.step = 3;
    },
    quitcancel() {
      //弹框取消的事件
      uni.navigateTo({
        url: "../login/login2",
      });
    },
    //检测是否新用户
    sendCode() {
      if (this.phoneNumber == "") {
        uni.showToast({
          title: "号码不能为空",
          icon: "none",
        });
      } else {
        let self = this;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/initUser/checkPhone", {
            phoneNumber: this.phoneNumber,
          })
          .then((res) => {
            uni.hideLoading();
            //console.log(res)
            if (res.data.code === -301) {
              uni.showToast({
                title: "您已注册，即将跳转到登录界面",
                icon: "none",
                duration: 2000,
              });
              uni.navigateTo({
                url: "../login/login2?phone=" + this.phoneNumber,
              });
            } else if (res.data.code === -302) {
              this.showtip = true;
              res.data.msg = this.phoneNumber;
              this.idx = -302;
            } else {
              this.sendJc();
            }
          });
      }
    },
    // 发送验证码
    sendJc() {
      if (this.codeMsg != "发送验证码") return;
      if (!this.config.pub.isMobile(this.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/initUser/getVerification", {
          phoneNumber: this.phoneNumber,
          type: "1", // 1：注册获取验证码；2：登录获取验证码
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            uni.showToast({
              title: "发送成功",
            });
            self.step = 2;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    secondCount() {
      this.codeMsg = "(" + this.count + ")秒后重新发送";
      this.interval = setInterval((s) => {
        --this.count;
        this.codeMsg = "(" + this.count + ")秒后重新发送";
        if (this.count <= 0) {
          clearInterval(this.count);
          this.count = 60;
          this.codeMsg = "发送验证码";
        }
      }, 1000);
    },
    // 提交验证码
    subCode() {
      if (!this.vCode) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/initUser/verification", {
          phoneNumber: this.phoneNumber,
          vCode: this.vCode,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            // uni.showToast({title: res.data.msg})
            self.step = 3;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 注册
    sub() {
      // if(!this.config.pub.pwd1(this.password)) {uni.showToast({title: '请输入6-16位密码',icon: 'none'});return};
      if (this.password != this.password2) {
        uni.showToast({
          title: "两次密码不一致",
          icon: "none",
        });
        return;
      }
      let self = this;
      if (this.idx == -302) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/initUser/registerAlReadyUser", {
            phoneNumber: this.phoneNumber,
            password: this.password,
          })
          .then((res) => {
            uni.hideLoading();
            //console.log(res)
            if (res.data.code === 200) {
              uni.navigateTo({
                url: "../login/login2?phone=" + this.phoneNumber,
              });
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      } else {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/initUser/register", {
            phoneNumber: this.phoneNumber,
            password: this.password,
            vCode: this.vCode,
            // gcode: this.gcode, // 推广码
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code === 200) {
              uni.showToast({
                title: res.data.msg,
              });
              setTimeout((s) => {
                // uni.navigateTo({url: '/pages/reg/sub-user-info'})
                uni.navigateTo({
                  url: "/pages/login/login2",
                });
              }, 1000);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ug-mbottom {
  margin-bottom: 20px;
}

.outBox {
  background-color: #f9f9f9;
}

.step-line {
  padding: 20upx;
  background-color: #fff;

  .step {
    color: #ccc;

    .stepNum {
      display: inline-block;
      width: 36upx;
      height: 36upx;
      border-radius: 50%;
      text-align: center;
      line-height: 36upx;
      background-color: #ccc;
      color: #fff;
      font-size: 26upx;
      margin-right: 10upx;
    }
  }

  .step.active {
    color: #18c7e1;

    .stepNum {
      background-color: #18c7e1;
    }
  }
}

// 表单
.inp-group {
  width: 85%;
  margin: 0 auto;

  .inp-item {
    margin-top: 50upx;

    .inp {
      padding: 15upx 0;
      color: #333;
      margin-top: 30upx;
    }
  }

  .sbtn {
    background: #18c7e1;
    color: #fff;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  >>> input {
    color: #ccc !important;
  }
}
</style>